<!-- Barrage.vue -->
<template>
	<view class="ani-box" :style="diyStyle" v-if="barrageList.length">
		<view v-for="(item, index) in barrageList" :key="index" class="barrage-item" :style="item.style">
			<view class="new-ani-box-block">
				<view class="ani-box-avatar">
					<image :src="$util.img(item.image)" mode=""></image>
				</view>
				<view class="ani-box-title">
					<text>{{item.card_name}}</text>
				</view>
				<view class="ani-box-shopgoods">
					<image :src="$util.img(item.image)" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//自定义样式
			diyStyle: {
				type: Object,
				default0: () => {
					return {}
				}
			},
			//初始化需要的数据
			list: {
				type: [Array],
				default0: () => {
					return []
				}
			}
		},
		data() {
			return {
				barrageList: [], // 弹幕列表
				timer: null, // 定时器
				screenWidth: uni.getSystemInfoSync().screenWidth, // 屏幕宽度
				//解释定时器
				clearTime: false,
				// 需要操作的数据
				copyArray: []
			};
		},
		watch: {
			list: {
				handler(newval, oldVal) {
					// 加载拷贝的数据
					this.copyArray = JSON.parse(JSON.stringify(this.list));
				},
				immediate: true
			}
		},
		mounted() {
			this.$nextTick(() => {
				if(this.copyArray.length){
					let num = 0;
					this.clearTime = setInterval(() => {
						this.addBarrage(this.copyArray[num])
						num += 1;
						if (num > this.copyArray.length - 1) num = 0;
					}, 1000)
				}
				
			})
		},
		methods: {
			// 添加弹幕
			addBarrage(obj) {
				const barrageItem = {
					style: {
						top: `${Math.floor(Math.random() * 80 + 10)}%`, // 随机位置
						right: '-300rpx',
					},
					...obj,
				};
				this.barrageList.push(barrageItem);
				this.$nextTick(() => {
					this.startAnimation(barrageItem);
				});
			},
			// 开始动画
			startAnimation(item) {
				const speed = 120; // 弹幕速度，可以根据需要调整
				const moveDistance = this.screenWidth + 300; // 弹幕移动的总距离

				item.style.transition = `transform ${moveDistance / speed}s linear`;
				item.style.transform = `translateX(-${moveDistance}px)`;

				this.timer = setTimeout(() => {
					this.removeBarrage(JSON.parse(JSON.stringify(item)));
				}, moveDistance / speed * 1000);
			},
			// 移除弹幕
			removeBarrage(item) {
				const index = this.barrageList.indexOf(item);
				if (index > -1) {
					this.barrageList.splice(index, 1);
				}
			},
		},
		beforeDestroy() {
			// 清除定时器
			clearTimeout(this.timer);
		},
	};
</script>

<style scoped lang="scss">
	.ani-box {
		position: relative;
		height: 100%;
		z-index: 99;
		top: -200rpx;
		.barrage-item {
			max-width: 300rpx;
			border-radius: 40rpx;
			padding: 0 20rpx;
			background: #fff;
			position: absolute;
			white-space: nowrap;
			font-size: 14px;
			color: #000;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			box-sizing: border-box;
			.new-ani-box-block{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 6rpx;
				.ani-box-avatar{
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;	
					}
				}
				.ani-box-title{
					margin: 0 20rpx;
					display: flex;
					align-items: center;
					text{
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}
				.ani-box-shopgoods{
					margin-top: -40rpx;
					image{
						width: 40rpx;
					}
				}
			}
		}
	}
</style>